<template>
  <div>
    <div class="unit">
      <div class="search">
        <el-form
          :inline="true"
          ref="formInline"
          :model="formInline"
          class="demo-form-inline"
        >
          <el-form-item label="">
            <el-input
              v-model="formInline.communityname"
              placeholder="小区名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-input
              v-model="formInline.unitname"
              placeholder="单元名称"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="formInline.createDt"
              align="right"
              type="date"
              placeholder="建设日期"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="">
            <el-select v-model="formInline.value" placeholder="选择状态">
              <el-option label="已建成" :value="1"></el-option>
              <el-option label="未建成" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              icon="el-icon-search"
              type="primary"
              @click="searchSubmit"
            ></el-button>
            <el-button icon="el-icon-plus" type="success" @click="addToDetail"
              >录入</el-button
            >
            <el-button type="primary" @click="resetForm('formInline')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table">
        <el-table
          :data="tableData"
          style="width: 100%"
          :stripe="true"
          :border="true"
        >
          <el-table-column prop="communityname" align="center" label="小区名称" width="">
          </el-table-column>
          <el-table-column prop="unitname" align="center" label="单元名称" width="">
          </el-table-column>
          <el-table-column prop="unitnum" align="center" label="栋数"> </el-table-column>
          <el-table-column prop="createtime" align="center" label="建设时间">
            <template slot-scope="scope">
              <span>{{
                scope.row.createtime.split("T")[0] +
                " " +
                scope.row.createtime.split("T")[1].split(".")[0]
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="unitstatus" align="center" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.unitstatus == 1">已建成</span>
              <span
                v-if="scope.row.unitstatus == 2 || scope.row.unitstatus == 0"
                >未建成</span
              >
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button plain size="small" @click="toDetail(scope.row.id)"
                >详情</el-button
              >
              <el-button
                size="small"
                type="danger"
                @click="deleteData(scope.row.id)"
                plain
                >归档</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="1"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="10"
          layout="total,sizes, prev, pager, next"
          :total="this.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //表格状态
      tableState: 0,
      //搜索日期选择
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      // 表格数据
      total: null,
      pageNumber: 0,
      pageSize: 10,
      tableData: null,
      //查询数据
      formInline: {
        communityname: null,
        unitname: null,
        createDt: null,
        value: null,
      },
    };
  },
  methods: {
    //删除表格数据
    deleteData(id) {
      this.$confirm("确定删除该单元信息?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // this.$Axios({
          //   url: "house/delunitList",
          //   method: "get",
          //   data: {
          //     id: id,
          //     token: sessionStorage.getItem("token"),
          //   },
          //   success: (res) => {
          //     console.log(res);
          //     this.getTableData();
          //     this.$message({
          //       type: "success",
          //       message: "删除成功!",
          //     });
          //   },
          // });
          this.$axios
            .get("house/delunitList", {
              params: {
                id: id,
                token: sessionStorage.getItem("token"),
              },
            })
            .then((res) => {
              console.log(res);
              this.getTableData();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //重置搜索的表单
    resetForm(formName) {
      //   console.log(this.$refs[formName], "this.$refs[formName]");
      this.$refs[formName].resetFields();

      // window.location.reload();

      this.formInline.communityname = null;
      this.formInline.unitname = null;
      this.formInline.unitname = null;
      this.formInline.createDt = null;
      this.formInline.value = null;
    },
    //从录入跳转详情
    addToDetail() {
      this.$router.push({
        path: "/house/add",
        query: {
          type: "ADD",
          detailId: null,
        },
      });
    },
    //跳转详情页面
    toDetail(val) {
      this.$router.push({
        path: "/house/add",
        query: {
          type: "DETAIL",
          detailId: val,
        },
      });
    },
    //获取表格数据
    getTableData() {
      this.$Axios({
        url: "house/gethouseList",
        method: "get",
        data: {
          pageNum: this.pageSize,
          currPage: this.pageNumber,
        },
        success: (res) => {
          console.log(res);
          this.tableData = res.data;
          this.total = res.total;
        },
      });
    },
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNumber = val;
      this.getTableData();
    },
    // 查询提交
    searchSubmit() {
      //   console.log(this.formInline, "forminline");
      this.$Axios({
        url: "house/searchList",
        method: "get",
        data: {
          communityname: this.formInline.communityname,
          unitname: this.formInline.unitname,
          createDt: this.formInline.createDt,
          value: this.formInline.value,
          currPage: this.pageNumber + 1,
          pageNum: this.pageSize,
          token: sessionStorage.getItem("token"),
        },
        success: (res) => {
          //   console.log(res);
          this.tableData = res.data;
        },
      });
    },
  },
  created() {
    this.getTableData();
  },
};
</script>
<style lang="scss" scoped>
.unit::v-deep {
  .search {
  }
  .table {
    thead {
      tr {
        th{
          font-size: 16px;
            color: black;
            background-color: #ddd;
        }
        
      }
    }
  }
  .page {
    text-align: right;
  }
}
</style>
